<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
    <meta charset="UTF-8">

    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
    <!--以下是兼容IE8高速渲染模式和360的高速模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 搜索引擎 方便爬虫扒-->
    <meta name="author" content="公司名称">
    <meta name="keywords" content="关键词，天猫，超市，购物">
    <meta name="description" content="jerehedu">
    <title>战网</title>

    <link xmlns="http://www.w3.org/1999/xhtml" rel="shortcut icon" href="//www.battlenet.com.cn/account/static/images/meta/favicon.2dy4z.ico" />
    <link rel="stylesheet" href="../css/account.css"/>

    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>

</head>
<body>
<div class="body-container">
    <div class="content">
        <div class="header">
            <div class="logo">
                <img src="../img/HeartStrone.png" alt="logo"/>
            </div>
            <div class="create-info">
                <h1>创建账号</h1>
                <p>创建战网通行证账号，开启您在<span>《炉石传说®》</span>中的冒险旅程。</p>
            </div>
        </div>
        <form action="http://www.baidu.com" ng-controller="Check" name="myForm">
            <div class="id-number clearFix control-group">
                <input type="text" name="idnumber" placeholder="身份证号码" maxlength="18" autofocus=""  required/>
                <span></span>
            </div>
            <fieldset>
                <div class="username clearFix control-group">
                    <input type="text" name="username" placeholder="姓名" maxlength="32" required/>
                    <span></span>
                </div>
            </fieldset>
            <fieldset>
                <div class="email clearFix control-group">
                    <input type="email" ng-model="email" id="email" name="email" placeholder="邮箱地址" autocapitalize="off" autocomplete="off" autocorrect="off" required/>
                    <span></span>
                </div>
                <div class="username clearFix control-group">
                    <input type="email" ng-model="emailCheck" id="email-check" name="email-check" placeholder="确认邮箱地址输入" required/>
                    <span></span>
                </div>
                <div class="username clearFix control-group">
                    <input type="password" ng-model="password" id="password" name="password" placeholder="密码" maxlength="16" autofocus="" utocapitalize="off" autocomplete="off" autocorrect="off" required/>
                </div>
                <div class="username clearFix control-group">
                    <input type="password" ng-model="passwordCheck" id="password-check" name="password-check" placeholder="确认密码输入" required/>
                    <span></span>
                </div>
                <div class="password-bottom">
                    <div class="arrow" style="left: 25px;"></div>
                    <div class="popover-content">
                        <ul>
                            <li class="neutral"><i></i>使用8-16个字符。</li>
                            <li class="neutral"><i></i>使用至少一个数字字符以及一个字母字符。</li>
                            <li class="neutral"><i></i>请勿使用任何特殊字符。</li>
                            <li class="neutral"><i></i>请勿使用与您账号名称相似的密码。</li>
                        </ul>
                    </div>
                </div>
            </fieldset>
            <script>
                var fChkMail=function(obj){
                    var name=$(obj);
                    var szReg=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
                    var bChk=szReg.test(name.val());
                    if(bChk==true){
                        console.log('true')
                        name.next().html('');
                        return true

                    }else{
                        console.log('false')
                        name.next().html('<i>'+'</i>'+'邮箱地址无效。').addClass('span-change');
                        return false

                    }
                };
                var email=$('#email');
                var password=$('#password');
                email.on('blur',function(){
                    fChkMail($(this));
//        if(fChkMail($(this)) == true){
//            return true;
//        }
//        return false;
                })
                password.on('focus',function(){
                    $('.password-bottom').show();
                })

            </script>
            <fieldset>
                <div class="safe-question clearFix control-group">
                    <div id="safeBox">
                        <input id="safe-content" type="button" name="safe-question" ng-model="safeQ" value="选择一个安全提问问题" style="text-align:left"/>
                        <span  class="slide-down-icon"></span>
                    </div>
                    <div class="safe-question-sildedown">
                        <ul>
                            <li>你第一辆车是什么车？</li>
                            <li>你读高中时住在那一条街？</li>
                            <li>你第一次坐飞机是飞往哪里？</li>
                            <li>你第一个通关了的电子游戏叫什么名字？</li>
                            <li>你的第二只宠物叫什么名字？</li>
                            <li>你最喜欢的球队或者球员叫什么名字？</li>
                        </ul>
                    </div>
                </div>
                <div class="safe-answer clearFix control-group">
                    <input type="text" name="answer" placeholder="安全提问回答" required/>
                    <span></span>
                </div>
                <div class="check-code clearFix control-group" ng-click="refresh(e)">
                    <img  alt id="security-image" src="">
                    <i class="refresh-btn"></i>
                    <span></span>
                </div>
                <div class="check-number clearFix control-group">
                    <input type="text" name="password-number" ng-model="passwordNumber" ng-keyup="checkAnswer()" placeholder="输入验证码" required/>
                    <span></span>
                </div>
            </fieldset>
            <fieldset></fieldset>
            <script>
                $(function(){
                    var safebtn=$('.safe-question-sildedown ul li');
                    var safecontent=$('#safe-content');
                    var safeinput=$('#safeBox');
                    safebtn.on('click',function(){
                        // console.log($(this).html());
                        $(this).siblings().removeClass('li_change');
                        $(this).toggleClass('li_change');
                        safecontent.attr('value',$(this).html());
                        $('.safe-question-sildedown').hide();
                    })
                    safeinput.on('click',function(){
                        //console.log($(this));
                        $('.safe-question-sildedown').toggle();
                        e=window.event ||e;
                        if(e.stopPropagation){
                            e.stopPropagation();
                        }else{
                            e.cancelBubble=true;
                        }
                    })
                    $(document).on('click',function(){
                        if($('.safe-question-sildedown').css('display')=='block'){
                            $('.safe-question-sildedown').hide();
                        }
                    })
                })
            </script>
            <fieldset>
                <div class="check-agreement clearFix control-group" onselectstart="return false" style="-moz-user-select:none;">
                    <div>
                        <label for="agreement" id="lable">
                            <input type="checkbox" id="agreement"/>
                            我同意该
                            <a href=" https://www.battlenet.com.cn/zh/legal-cn/privacy " rel="enternal">隐私政策</a>
                            中规定的各项条款。
                            <span class="check-box"></span>
                        </label>
                    </div>
                </div>
            </fieldset>
            <div id="submit-content">
                <button type="submit" >免费注册战网通行证</button>
                <a href="##">已有通行证了?</a>
            </div>
            <p class="p">点击“免费注册战网通行证”即表示我同意并接受
                <a href="https://www.battlenet.com.cn/zh/legal-cn/eula">
                    战网最终用户许可协议
                    <i></i>
                </a>
                以及
                <a href="https://www.battlenet.com.cn/account/legal/privacy.html">
                    线上隐私政策
                    <i></i>
                </a>。
            </p>
        </form>
    </div>
</div>
<div class="footer">
    <div class="footer-container">
        <div class="footer-top">
            <div class="footer-nav">
                <a href="http://www.battlenet.com.cn/support/">
                    <i style="background-position: -96px 0px;"></i>支持
                </a>
                <a href="http://www.battlenet.com.cn/support/">
                    <i style="background-position: -144px -24px;"></i>反馈
                </a>
                <a href="http://www.battlenet.com.cn/support/">
                    <i style="background-position: -120px -432px;"></i>战网安全中心
                </a>
            </div>

        </div>
        <div class="footer-bottom clearFix">
            <div class="footer-left">
                <img src="../img/blizzard%20(1).png" alt=""/>
            </div>
            <div class="footer-right" >
                    <a class="nav-item nav-a" href="http://jobs.blizzard.com/" data-analytics="global-nav" data-analytics-placement="Footer - Careers">查找职位</a>
                    <span class="fence">|</span>
                    <a class="nav-item nav-a" href="http://us.blizzard.com/company/about/" data-analytics="global-nav" data-analytics-placement="Footer - About">关于</a>
                    <span class="fence">|</span>
                    <a class="nav-item nav-a" href="https://www.battlenet.com.cn/account/legal/privacy.html" data-analytics="global-nav" data-analytics-placement="Footer - Privacy">隐私</a>
                    <span class="fence">|</span>
                    <a class="nav-item nav-a" href="//www.battlenet.com.cn/zh/legal-cn/" data-analytics="global-nav" data-analytics-placement="Footer - Terms">法律条款</a>
                    <span class="fence">|</span>
                    <a class="nav-item nav-a" href="//dev.battle.net" data-analytics="global-nav" data-analytics-placement="Footer - API">API</a>
                    <div class="link-row"></div>
                    <a class="nav-item nav-a" href="http://www.battlenet.com.cn/static/local-common/images/legal/cn/license.png" data-analytics="global-nav" data-analytics-placement="Footer - CN License">沪网文[2014]0731-161号</a>
                    <span class="fence">|</span>
                    <a class="nav-item nav-a" href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" data-analytics="global-nav" data-analytics-placement="Footer - CN Portal">增值电信业务经营许可证编号：沪B2－20080012</a>
                    <div class="link-row"></div>
                    <span>互联网违法和不良信息举报电话：0571-28090163</span>
                    <span class="fence">|</span>
                    <span>沪公网安备：31011502002167</span>
                    <div class="copyright">©2016 Blizzard Entertainment, Inc.</div>
                    <div class="nav-footer-icon-container">
                        <ul class="clearFix">
                            <li><a href="http://sh.cyberpolice.cn/infoCategoryListAction.do?act=initjpg" target="_blank" style="background: url('../img/police.png')"></a></li>
                            <li><a href="http://www.zx110.org/" target="_blank" style="background: url('../img/22.png')"></a></li>
                            <li><a href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&amp;entyId=20111011175417664" target="_blank" style="background: url('../img/33.png')"></a></li>
                            <li><a href="http://www.shjbzx.cn/" target="_blank" style="background: url('../img/44.png')"></a></li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
</div>

<div class="music" ng-controller="music">
    <button ng-click="play()" id="musicBtn">Play</button>
    <button ng-click="stop()">Stop</button>
    <button ng-click="next()">Next</button>
    <button ng-click="before()">Before</button>
</div>
<script src="../controller/music&&checkbox.js"></script>

<script>
    $(function(){
        var ImgBox=$('#security-image');
        var musicBtn=$('#musicBtn');
        ImgBox.trigger('click');
        var lable=$('#lable');
        lable.on('click',function(e){

           console.log($(this).children().last());
           $(this).children().last().toggleClass("check-box-chang");
            /****************以下是阻止事件冒泡***********************/
//            e = window.event || e;
//            if (e.stopPropagation) {
//                e.stopPropagation();
//            } else {
//                e.cancelBubble = true;
//            }
            /****************以下是阻止事件捕获***********************/
            return false
        })
    })
</script>
</body>
</html>